<style lang="less">
.my {
  height: 100%;
  // background-color:pink;
  .top {
    padding: 15px 15px;
    width: 100%;
    text-align: end;
  }
  .user {
    position: absolute;
    top: 15%;
    left: 38%;
    .user-photo {
      width: 90px;
      height: 90px;
      border-radius: 50%;
      background-image: url(../../public/image/user.png);
      background-size: cover;
      border: 3px solid pink;
    }
  }
  .user-name {
    position: absolute;
    width: 100%;
    overflow: hidden;
    top: 28%;
    margin-top: 15px;
    text-align: center;
  }
  .main {
    position: absolute;
    top: 45%;
    left: 33%;
    p {
      display: block;
      padding: 15px 20px;
      border-bottom: 1px solid #ffc0cb;
    }
  }
}
</style>

<template>
  <div class="my">
    <div class="top">
      <a type="warning" @click="logout"> 退出登录 </a>
    </div>
    <div class="user">
      <div class="user-photo"></div>
    </div>
    <div class="user-name">
      <router-link v-if="token" to="/my">{{ username }}</router-link>
      <router-link v-else to="/login">登录</router-link>
    </div>
    <div class="main">
      <p>联系客服</p>
      <p>意见反馈</p>
      <p>信息中心</p>
      <p>关于我们</p>
    </div>
  </div>
</template>

<script>
import { Dialog } from "vant";

let qi_users = []
let qi_users_str = localStorage.getItem("qi_USERS")
if (qi_users_str) {
  qi_users = JSON.parse(qi_users_str)
}

// let userimgs = {};
// let imgstr = localStorage.getItem("qi_USERIMG");
// if (imgstr) {
//   userimgs = JSON.parse(imgstr);
// }

export default {
  data() {
    return {
      token: false,
      username: "",
    };
  },
  created() {
    let token = localStorage.getItem("AUTO_TOKEN");
    this.token = token;
    let arr = qi_users.filter(item=> item.id == token);
    if(arr!=0){
        this.username = arr[0].username;
    }

    // // 获取用户名
    // this.username = localStorage.getItem("qi_USERNAME");
    // //  获取用户身份
    // let token = localStorage.getItem("AUTO_TOKEN");
    // //  判断是否登录
    // if (token) {
    //   // 判断是否有存在用户头像
    //   if (userimgs[token] && userimgs[token].src) {
    //     // 有，那就赋值 （刷新这个头像就持久存储在本地的）
    //     this.src = userimgs[token].src;
    //   }
    // }
  },

  methods: {
    //     afterRead(file) {
    //   // 此时可以自行将文件上传至服务器
    //   // console.log(file);
    //   if(file) {
    //     // 把base64格式的图片字符串赋值给src变量
    //     this.src = file.content;
    //     // 获取用户身份
    //     let token = localStorage.getItem("AUTO_TOKEN");
    //     if(token) {
    //       // 该用户头像是否存在
    //       if(userimgs[token]){
    //          // 是 (有缓存头像)
    //          userimgs[token].src = file.content;
    //       }
    //       else {
    //         // 否
    //         // 对象
    //         userimgs[token] = {};
    //         userimgs[token].src = file.content;
    //       }
    //       localStorage.setItem("qi_USERIMG", JSON.stringify(userimgs));
    //     }
    //   }
    // },

    logout() {
      // 先给用户做弹窗反馈
      Dialog.confirm({
        confirmButtonColor: "#ffc0cb",
        message: "您确定要退出登录吗",
        title: "提示",
      })
        .then(() => {
          // on close
          localStorage.removeItem("AUTO_TOKEN");
          setTimeout(() => {
            // 跳转登录页
            this.$router.push({ path: "/login" });
          }, 150);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>
